<template>
	<view class="broadband">
		<!-- <view class="topBox">
			<view class="title">宽带缴费</view>
			<view class="textBox mTop2">
				<view class="text">请再下方选择参与的特惠充值活动</view>
			</view>
		</view> -->
		
		<view class="formBox mTop4">
			<view class="item">
				<view class="label">姓名</view>
				<view class="inputBox flex1">
					<input class="input redText" type="text" v-model="form.name" :disabled="closeEdit" placeholder="请如实填写" placeholder-class="placeholderClase"/>
				</view>
			</view>
			<view class="item mTop2" v-if="form.type == 2">
				<view class="label">电话</view>
				<view class="inputBox flex1">
					<input class="input redText" type="text" v-model="form.mobile" :disabled="closeEdit" placeholder="请输入入网电话" placeholder-class="placeholderClase"/>
				</view>
			</view>
			<view class="item mTop2">
				<view class="label">学号</view>
				<view class="inputBox flex1">
					<input class="input redText" type="text" v-model="form.studentID" :disabled="closeEdit" placeholder="请输入本人学号" placeholder-class="placeholderClase"/>
				</view>
			</view>
			<view class="item mTop2">
				<view class="label">院系</view>
				<view class="inputBox flex1">
					<picker :class="{'closeEdit': closeEdit}" mode="selector" :range="academyList" :value="academyIndex" @change="academyChange">
						<view class="picker flex_conter">
							<input class="input picker-input flex1" type="text" v-model="form.academy" placeholder="请选择院系" placeholder-class="placeholderClase" />
							<view class="input-icon">
								<uni-icons type="arrowdown" size="13" color="#c0c4cc"></uni-icons>
							</view>
						</view>
					</picker>
				</view>
			</view>
			<view class="item mTop2">
				<view class="label" v-if="form.type == 1">校园网登录账号</view>
				<view class="label" v-else>入网开户号码</view>
				<view class="inputBox flex1">
					<input class="input redText" type="text" v-model="form.account" :disabled="closeEdit" placeholder="请输入账号" placeholder-class="placeholderClase"/>
				</view>
			</view>
			
			<view class="item mTop2" v-if="form.msg && form.status == 5">
				<view class="label">驳回原因</view>
				<view class="inputBox flex1">
					<input class="input redText" type="text" v-model="form.msg" :disabled="closeEdit" placeholder="" placeholder-class="placeholderClase"/>
				</view>
			</view>
		</view>
		
		<view class="bottomBox mTop5" v-if="!formClose">
			<button class="btn" type="default" hover-class="none" @click="PayEvent">确认提交</button>
		</view>
	</view>
</template>

<script>
	var util = require('../../common/util.js');
	var jweixin = require('../../common/wxsdk.js')  
	export default {
		data() {
			return {
				form: {
					name: '',
					studentID: '',
					academy: '',
					account: ''
				},
				academyList: [],
				academyIndex: 0,
				id: 0,
				closeEdit: false,
				formClose: false,
				setting_parent_user:'',
			}
		},
		onLoad (options) {
			if (options.id) {
				this.id = options.id
				if (options.k_status == 1) {
					this.closeEdit = true
					
				} else if (options.k_status == 2) {
					this.closeEdit = true
					this.formClose = true
				}else{
					this.closeEdit = true
					this.formClose = true
				}
			}
			console.log(options);
			this.setting_parent_user = options.setting_parent_user;
			this.getBroadband(options.setting_parent_user);
		},
		methods: {
			PayEvent(){
				let that = this;
				util.requestPost('index/broadbandPay', {setting_parent_user:that.setting_parent_user,form:JSON.stringify(that.form),id:that.id}, (res) => {
					if (res.code == 1) {
						console.log(res);
						if(res.data.is_pay == 1){
							jweixin.config({
									debug: false, 
									appId: 'wxa3e4466dab1f4cbc', // 必填，公众号的唯一标识
									timestamp: res.data.list.timeStamp, // 必填，生成签名的时间戳
									nonceStr: res.data.list.nonceStr, // 必填，生成签名的随机串
									signature: res.data.list.paySign,// 必填，签名
									jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
								});
								
							jweixin.ready(function(){
							  jweixin.chooseWXPay({
								timestamp: res.data.list.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
								nonceStr: res.data.list.nonceStr, // 支付签名随机串，不长于 32 位
								package: res.data.list.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
								signType: res.data.list.signType, // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
								paySign: res.data.list.paySign, // 支付签名
								success: function (res) {
								  // 支付成功后的回调函数
									 that.$toast('支付成功')
									 setTimeout(() => {
										uni.navigateTo({
											url:'/pages/my/orderRecord',
											fail(err) {
												uni.showToast({
													title: `跳转失败：${JSON.stringify(err)}`,
													icon: 'none'
												})
											}
										})
									 }, 500);
								},
								fail(err){
									 that.$toast('支付失败',JSON.stringify(err))
								}
							  });
							});
							jweixin.error(function(res){
								that.$toast('请刷新重试')
							});
						}else{
							that.$toast(res.msg)
							setTimeout(() => {
								uni.redirectTo({
									url:'/pages/my/orderRecord',
									fail(err) {
										uni.showToast({
											title: `跳转失败：${JSON.stringify(err)}`,
											icon: 'none'
										})
									}
								})
							}, 500);
						}
						
					} else {
						that.$toast(res.msg)
					}
				}, (err) => {
					console.log(err);
				}, {isShowLoading: false});
			},
			
			getBroadband(setting_parent_user){
				util.requestPost('index/getBroadband', {setting_parent_user:setting_parent_user,id:this.id}, (res) => {
					if (res.code == 1) {
						console.log(res);
						this.academyList = res.data.list;
						if(this.id && this.id != ''){
							this.form = res.data.info;
						}
					} else {
						
					}
				}, (err) => {
					console.log(err);
				}, {isShowLoading: false});
			},
			academyChange (e) {
				let index = e.target.value;
				this.academyIndex = index;
				this.form.academy = this.academyList[index];
			},
		}
	}
</script>

<style scoped lang="scss">
.broadband {
	padding: 20rpx;
	.topBox {
		color: #FFFFFF;
		padding: 20rpx;
		text-align: center;
		border-radius: 20rpx;
		background: $btn-bg-color;
		.textBox {
			.text {
				font-size: 26rpx;
			}
		}
	}
	.formBox {
		.item {
			border: $border-base;
			border-radius: 12rpx;
			display: flex;
			align-items: stretch;
			.label {
				width: 280rpx;
				font-size: 28rpx;
				text-align: center;
				height: 68rpx;
				line-height: 68rpx;
				border-right: $border-base;
				background-color: $bg-color;
			}
		}
		.inputBox {
			.input {
				font-size: 28rpx;
				height: 68rpx;
				line-height: 68rpx;
				padding: 0 20rpx;
			}
			.input-icon {
				margin: 0 20rpx;
			}
			.picker-input {
				pointer-events: none;
			}
			.placeholderClase {
				font-size: 24rpx;
			}
		}
	}
	.bottomBox {
		.btn {
			color: #FFFFFF;
			font-size: 28rpx;
			line-height: 76rpx;
			border-radius: 20rpx;
			background: $btn-bg-color;
			&::after {
				border: none;
			}
		}
	}
}
.closeEdit {
	pointer-events: none;
}
</style>
